﻿<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Westside Chinese School Registration 2014-2015</title>
  <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
  <style>
  div {
    display: inline-block;
  }
  div.page {
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 20px;
    width: 800px;
  }
  div.pagetitle {
    color: #bd5353;
    display: block;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    line-height: 26px;
    padding: 0.3em 0 0.3em 0;
    text-transform: uppercase;
  }
  div.subtitle {
    color: #bd5353;
    display: block;
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
    padding: 0.3em 0 0.3em 0;
  }
  div.tc {
    font-family: Microsoft JhengHei, Arial, sans-serif;
  }
  div.sc {
    font-family: Microsoft YaHei, Arial, sans-serif;
  }
  div.systemdata {
    font-family: "courier new";
    font-size: 14px;
  }
  input {
    display: inline-block;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    margin: 0px 10px 0px 0px;
    padding: 2px 2px 2px 2px;
  }
  input[type=text] {
    width: 90%;
    margin: 0px;
  }
  .req:after {
    color: red;
    content: "*"
  }
  .error {
    background-color: #ffaaaa;
  }
  table.grid {
    border: 1px solid #98bf21;
    width: 100%;
  }
  table.grid th {
    font-size: 1.4em;
    background-color: #a7c942;
    color: #fff;
  }
  table.grid td {
    border: 1px dotted #98bf21;
    width: 25%;
  }
  table.grid td.fixed {
    background-color: #e5eecc;
  }
  ol {
    list-style-type:decimal;
    margin: 10px;
    padding: 20px;
  }
  </style>
</head>
<body>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js" type="text/javascript"></script>
<div class="page" id="lang_selector">
  <div class="pagetitle">Westside Chinese School Registration</div>
  <br />
  <a id="lang_en" href="#">For English Version, click here.</a><br />
  <br />
  <a id="lang_tc" href="#">繁體中文版請按這裡。</a><br />
  <br />
  <a id="lang_sc" href="#">简体中文版请按这里。</a>
</div>
<div class="page" id="page0">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>1 of 7 -&nbsp;</div>
    <div class="en">Welcome Page</div>
    <div class="tc">首頁</div>
    <div class="sc">首页</div>
  </div>
  <br />
  <div class = "en">
    Welcome to the online registration page of Westside Chinese School.<br />
    <br />
    You will need to print out an application form at the end of the registration, please have your printer ready.<br />
    <br />
    For returning families, please pay at school directly and there's no need to register again online.<br />
    For new families, click Next.
  </div>
  <div class="tc">
    歡迎使用西區中文學校網路註冊服務。<br />
    <br />
    在註冊的最後步驟，您必須將申請表列印出來，請準備好您的印表機。<br />
    <br />
    舊生家庭請在學校繳費即可，無需網路註冊。<br />
    新生請按下一步。
  </div>
  <div class="sc">
    欢迎使用西区中文学校网络注册服务。<br />
    <br />
    在注册的最後步骤，您必须将申请表打印出来，请准备好您的印表机。<br />
    <br />
    旧生家庭请在学校缴费即可，无需网络注册。<br />
    新生请按下一步。
  </div>
  <br /><br />
  <input type="button" id="next0" value="Next &gt;&gt;" />
</div>
<div class="page" id="page1" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络註册</div>
  </div>
  <div class="subtitle">
    <div>2 of 7 -&nbsp;</div>
    <div class="en">Note for New Students</div>
    <div class="tc">新生註冊說明</div>
    <div class="sc">新生注册说明</div>
  </div>

  <div class="en">
    In the next screen you will be asked to fill out our registration form,
    one registration form per family. Before we get started, please read the
    following registration notes:<br />
    <ol>
      <li>All students must be 5 years or older on the first day of the school year.</li>
      <li>The tuition is $700 (or $600 for early registration). Officers, teachers,
      and coaches who meet tuition reduction criteria will be refunded after the
      school year begins.</li>
	  <li>Students whose completed registrations are postmarked by 7/31/2014
	  will receive the textbooks on the first day of school. Students who
	  register after 7/31/2014 are not guaranteed to receive the textbooks
	  on the first day of school.</li>
      <li>Registration deadline and early bird discount deadline are determined by
      payment postmark.</li>
      <li>Each family, except staff and some teachers, shall serve 20 hours
      per year. Each family is required to maintain the $200 service deposit at
      time of registration. For families departing the school, the refund for family service point
	  deposit must be requested within one year from the last day of the academic
	  year in which they depart. After that time, no refund will be granted.</li>
      <li>Students applying for school language credit must take one designated
      extra-curricular class in addition to the regular 3 hours of Chinese
      instruction each week (total of 4 hours per week). Those who miss more than
      12 hours of lessons will not be granted credits. Credit students shall submit
      application form (available upon request in the office), decide extra-curricular
      class and pay for the associated fee on the first class of the school year.</li>
      <li>Extracurricular classes (EC) are optional and open to all students and parents. Fees
      of EC are not included in the tuition and will be collected when you register for EC
	  at the beginning of the school year.</li>
      <li>Registration fee is $100 and non-refundable. Bounced check fee is $30/each.</li>
    </ol>
  </div>
  <div class="tc">
    在下個畫面您將開始填寫註冊表格, 每個家庭只需填寫一張。在正式開始填表之前, 請閱讀以下的註冊說明:<br />
    <ol>
      <li>學生在開學日當天必須滿五足歲。</li>
      <li>本學年學費為每學生 $700,  (提前註冊者 $600)。教職員符合寬減條件者, 開學後發放寬減額。</li>
	  <li>學生於7/31/2014 (郵戳為憑) 前完成註冊手續者, 將可於開學當日領取教科書。
	  學生於7/31/2014 後始註冊者, 於開學當日不保證可領取教科書。</li>
      <li>註冊截止日期以繳費日郵戳為憑。</li>
      <li>除行政人員、部份教職員外, 每個會員家庭每年應服務20小時。註冊時應繳足服務保證金$200。
	  離校家庭須於離校該學年度之最後一日起算一年之期限內申請服務保証金之退費, 逾期恕不受理。</li>
      <li>申請學分的學生, 每次除了上正常的三堂中文課外, 並須加選一堂指定的課外活動 (共計四小時), 在全學年中,
      如缺席12小時以上將不授與學分。學生應於開學第一週繳交學分申請表, 選定課外活動科目並繳交課外活動費用。</li>
      <li>課外活動時間為11:45A.M.-12:45P.M. 學生及家長均可自由選擇參加。課外活動的費用不包括在學費之內,
      本校將採取統一費率, 於學期開學後接受報名登記及收費 (詳細辦法將另行通知)。</li>
      <li>註冊費 $100 (恕不退費), 支票跳票處理費每張 $30。</li>
    </ol>
  </div>
  <div class="sc">
    在下个画面您将开始填写注册表格, 每个家庭只需填写一张。在正式开始填表之前, 请阅读以下的注册说明:<br />
    <ol>
      <li>学生在开学日当天必须满五足岁。</li>
      <li>本学年学费为每学生 $700,  (提前注册者 $600)。教职员符合宽减条件者, 开学後发放宽减额。</li>
	  <li>学生於7/31/2014 (邮戳为凭) 前完成注册手续者, 将可於开学当日领取教科书。
	  学生於7/31/2014 後始注册者, 於开学当日不保证可领取教科书。</li>
      <li>注册截止日期以缴费日邮戳为凭。</li>
      <li>除行政人员、部份教职员外, 每个会员家庭每年应服务20小时。注册时应缴足服务保证金$200。
	  离校家庭须於离校该学年度之最後一日起算一年之期限内申请服务保证金之退费, 逾期恕不受理。</li>
      <li>申请学分的学生, 每次除了上正常的三堂中文课外, 并须加选一堂指定的课外活动 (共计四小时), 在全学年中,
      如缺席12小时以上将不授与学分。学生应於开学第一週缴交学分申请表, 选定课外活动科目并缴交课外活动费用。</li>
      <li>课外活动时间为11:45A.M.-12:45P.M. 学生及家长均可自由选择参加。课外活动的费用不包括在学费之内,
      本校将采取统一费率, 於学期开学後接受报名登记及收费 (详细办法将另行通知)。</li>
      <li>注册费 $100 (恕不退费), 支票跳票处理费每张 $30。</li>
    </ol>
  </div>
  <br />
  <input type="button" id="next1" value="Next &gt;&gt;" />
</div>
<div class="page" id="page2" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>3 of 7 -&nbsp;</div>
    <div class="en">Family Information</div>
    <div class="tc">家庭資料</div>
    <div class="sc">家庭资料</div>
  </div>
  <br />
  <div class="en">
    We'll start with basic information of parents/guardians. Each family must have
    at least one parent/guardian. For adult students, please fill in yourself as the parent
    so that you will receive e-mail communications from the school.<br />
    <b>To go back to a previous screen to make corrections, please click on the
	"Previous" button and not the browser's back button.  Clicking the browser's
	back button will clear the form and you will have to re-enter your information. </b><br />
    Starred fields (<div class="req"></div>) are required.<br />
  </div>
  <div class="tc">
    我們將從填寫家長/監護人的資料開始。每個家庭至少需有一位家長/監護人。參加成人班的學生請在家長欄填入您個人的資料,
    以便學校能夠以電子郵件的形式與您聯絡。<br/>
    <b>由於系統設計上的限制, 若您需要回到上一頁去更正資料時,
    請按頁面上的「上一頁」而不是您的瀏覽器所提供的上一頁鈕。如果您按到了瀏覽器的上一頁鈕,
    您將被迫重新輸入全部的資料。</b><br />
    標示有星號 (<div class="req"></div>) 的欄位為必填資料。<br />
  </div>
  <div class="sc">
    我们将从填写家长/监护人的资料开始。每个家庭至少需有一位家长/监护人。参加成人班的学生请在家长栏填入您个人的资料,
    以便学校能够以电子邮件的形式与您联系。<br/>
    <b>由於系统设计上的限制, 若您需要回到上一页去更正资料时,
    请按页面上的「上一页」而不是您的浏览器所提供的上一页钮。如果您按到了浏览器的上一页钮,
    您将被迫重新输入全部的资料。</b><br />
    标示有星号 (<div class="req"></div>) 的栏位为必填资料。<br />
  </div>
  <hr />
  <input type="checkbox" id="only1p">
    <div class="en">There is only one parent/guardian in my family.</div>
    <div class="tc">我們家只有一位家長/監護人。</div>
    <div class="sc">我们家只有一位家长/监护人。</div>
  </input>
  <table id="parentTable">
    <tr>
      <td></td>
      <td>
        <div class="en req">Primary Contacting Parent/Guardian</div>
        <div class="tc req">家長/監護人(主要聯絡人)</div>
        <div class="sc req">家长/监护人(主要联络人)</div>
      </td>
      <td id="p2t">
        <div class="en">Parent/Guardian</div>
        <div class="tc">家長/監護人</div>
        <div class="sc">家长/监护人</div>
      </td>
    </tr>
    <tr>
      <td id="pteng_name">
        <div class="en req">English Name</div>
        <div class="tc req">英文姓名</div>
        <div class="sc req">英文姓名</div>
      </td>
      <td><input type="text" id="p1eng_name" maxlength="50"/></td>
      <td><input type="text" id="p2eng_name" maxlength="50"/></td>
    </tr>
    <tr>
      <td id="ptchn_name">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><input type="text" id="p1chn_name" maxlength="5"/></td>
      <td><input type="text" id="p2chn_name" maxlength="5"/></td>
    </tr>
    <tr>
      <td>
        <div class="en">Occupation/Specialty</div>
        <div class="tc">職業/專長</div>
        <div class="sc">职业/专长</div>
      </td>
      <td><input type="text" id="p1spec" maxlength="35"/></td>
      <td><input type="text" id="p2spec" maxlength="35"/></td>
    </tr>
    <tr>
      <td id="ptcell">
        <div class="en req">Primary Phone</div>
        <div class="tc req">主要電話</div>
        <div class="sc req">主要电话</div>
      </td>
      <td><input type="text" id="p1cell_ph" maxlength="13"/></td>
      <td><input type="text" id="p2cell_ph" maxlength="13"/></td>
    </tr>
    <tr>
      <td id="ptworkph">
        <div class="en">Secondary Phone</div>
        <div class="tc">次要電話</div>
        <div class="sc">次要电话</div>
      </td>
      <td><input type="text" id="p1work_ph" maxlength="20"/></td>
      <td><input type="text" id="p2work_ph" maxlength="20"/></td>
    </tr>
    <tr>
      <td id="ptemail">
        <div class="req">E-Mail</div>
      </td>
      <td><input type="text" id="p1email" maxlength="70"/></td>
      <td><input type="text" id="p2email" maxlength="70"/></td>
    </tr>
    <tr>
      <td id="ptchnlv">
        <div class="en req">Mandarin Proficiency</div>
        <div class="tc req">中文程度</div>
        <div class="sc req">中文水平</div>
      </td>
      <td id="p1chnlv">
        <input type="radio" name="p1clv" value="0" id="p1clv0" />
        <div class="en">Non-speaker</div>
        <div class="tc">無</div>
        <div class="sc">无</div>
        <input type="radio" name="p1clv" value="1" id="p1clv1" />
        <div class="en">Listen/Speak Only</div>
        <div class="tc">聽/說可通</div>
        <div class="sc">听/说可通</div>
        <input type="radio" name="p1clv" value="2" id="p1clv2" />
        <div class="en">Native Educated</div>
        <div class="tc">聽說讀寫流利</div>
        <div class="sc">听说读写流利</div>
      </td>
      <td id="p2chnlv">
        <input type="radio" name="p2clv" value="0" id="p2clv0" />
        <div class="en">Non-speaker</div>
        <div class="tc">無</div>
        <div class="sc">无</div>
        <input type="radio" name="p2clv" value="1" id="p2clv1" />
        <div class="en">Listen/Speak Only</div>
        <div class="tc">聽/說可通</div>
        <div class="sc">听/说可通</div>
        <input type="radio" name="p2clv" value="2" id="p2clv2" />
        <div class="en">Native Educated</div>
        <div class="tc">聽說讀寫流利</div>
        <div class="sc">听说读写流利</div>
      </td>
    </tr>
  </table>
  <hr />
  <div>
    <div class="en">Primary Residence:</div>
    <div class="tc">住家資訊:</div>
    <div class="sc">住家资讯:</div>
  </div>
  <table id="familyTable">
    <tr>
      <td id="ptaddr">
        <div class="en req">Street Address</div>
        <div class="tc req">住家街道地址</div>
        <div class="sc req">住家街道地址</div>
      </td>
      <td colspan=3><input type="text" id="addr" maxlength="95"/></td>
    </tr>
    <tr>
       <td id="ptcity">
         <div class="en req">City</div>
         <div class="tc req">城市</div>
         <div class="sc req">城市</div>
       </td>
       <td><input type="text" id="city" maxlength="35"/></td>
       <td>
         <div class="en req">State</div>
         <div class="tc req">州</div>
         <div class="sc req">州</div>
       </td>
       <td>
         <select id="state">
           <option value="CA" selected>CA</option>
         </select>
       </td>
    </tr>
    <tr>
       <td id="ptzip">
         <div class="en req">Zip</div>
         <div class="tc req">郵遞區號</div>
         <div class="sc req">邮政编码</div>
       </td>
       <td><input type="text" id="zip" maxlength="5"/></td>
       <td id="pthome_ph">
        <div class="en req">Phone</div>
        <div class="tc req">電話</div>
        <div class="sc req">电话</div>
      </td>
      <td><input type="text" id="home_ph" maxlength="13"/></td>
    </tr>
  </table>
  <hr />
  <div>
    <div class="en">In the event when emergency medical care is req, contact:</div>
    <div class="tc">若有緊急的醫療需求, 聯絡以下的醫生:</div>
    <div class="sc">若有紧急的医疗需求, 联系以下的医生:</div>
  </div>
  <table>
    <tr>
      <td id="ptdoc_ph">
        <div class="en">Doctor Name</div>
        <div class="tc">醫生姓名</div>
        <div class="sc">医生姓名</div>
      </td>
      <td><input type="text" id="doc_name" maxlength="50"/></td>
      <td id="ptemer_ph">
        <div class="en">Phone</div>
        <div class="tc">電話</div>
        <div class="sc">电话</div>
      </td>
      <td><input type="text" id="doc_ph" maxlength="20"/></td>
    </tr>
  </table>
  <div>
    <div class="en">Person who can provide temporary care in case you cannot be reached under an emergency situation:</div>
    <div class="tc">緊急狀況下若無法聯絡上您, 誰可提供貴子女暫時的照護?</div>
    <div class="sc">紧急状况下若无法联系上您, 谁可提供贵子女暂时的照护?</div>
  </div>
  <table>
    <tr>
      <td>
        <div class="en">Emergency Contact Name</div>
        <div class="tc">緊急聯絡人姓名</div>
        <div class="sc">紧急联络人姓名</div>
      </td>
      <td><input type="text" id="emer_name" maxlength="50"/></td>
      <td>
        <div class="en">Phone</div>
        <div class="tc">電話</div>
        <div class="sc">电话</div>
      </td>
      <td><input type="text" id="emer_ph" maxlength="20"/></td>
    </tr>
  </table>
  <br />
  <input type="button" id="next2" value="Next &gt;&gt;" />
</div>
<div class="page" id="page3" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>4 of 7 -&nbsp;</div>
    <div class="en">Student Info</div>
    <div class="tc">學生資料</div>
    <div class="sc">学生资料</div>
  </div>
  <br />
  <div>
    <div class="en">
      In this page we will be inputing student information. Please input
      <strong>ALL</strong> students in your family that are going to Chinese
      School.<br />
    </div>
    <div class="tc">
      接下來我們要輸入學生資料, 所有要來中文學校上學的學生, 都必須輸入資料。<br />
    </div>
    <div class="sc">
      接下来我们要输入学生资料, 所有要来中文学校上学的学生, 都必须输入资料。<br />
    </div>
  </div>
  <div class="en">Please indicate how many students in your family is going to Chinese School:</div>
  <div class="tc">請選擇您家中共有幾位學生要來中文學校上課:</div>
  <div class="sc">请选择您家中共有几位学生要来中文学校上课:</div>
  <select id="num_stu">
    <option selected>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
  <hr />
  <div id="stu1">
    <table>
      <tr>
        <td id="s1tln">
          <div class="en req">Last Name</div>
          <div class="tc req">英文姓氏</div>
          <div class="sc req">英文姓氏</div>
        </td>
        <td><input type="text" id="s1ln" maxlength="25"/></td>
        <td id="s1tfn">
          <div class="en req">First Name</div>
          <div class="tc req">英文名字</div>
          <div class="sc req">英文名字</div>
        </td>
        <td><input type="text" id="s1fn" maxlength="25"/></td>
      </tr>
      <tr>
        <td id="s1tcn">
          <div class="en">Chinese Name</div>
          <div class="tc">中文姓名</div>
          <div class="sc">中文姓名</div>
        </td>
        <td><input type="text" id="s1chn" maxlength="5"/></td>
        <td id="s1tbd">
          <div class="en req">Date of Birth</div>
          <div class="tc req">生日</div>
          <div class="sc req">生日</div>
        </td>
        <td><input type="text" id="s1bd" /></td>
      </tr>
      <tr>
        <td id="s1tg">
          <div class="en req">Gender</div>
          <div class="tc req">性別</div>
          <div class="sc req">性別</div>
        </td>
        <td>
          <input type="radio" name="s1g" value="M" id="s1gm" />
          <div class="en">Male</div>
          <div class="tc">男</div>
          <div class="sc">男</div>
          <input type="radio" name="s1g" value="F" id="s1gf" />
          <div class="en">Female</div>
          <div class="tc">女</div>
          <div class="sc">女</div>
        </td>
        <td id="s1ts">
          <div class="en req">Speak Chinese at Home</div>
          <div class="tc req">在家是否說中文</div>
          <div class="sc req">在家是否说中文</div>
        </td>
        <td>
          <input type="radio" name="s1s" value="Y" id="s1sy" />Yes
          <input type="radio" name="s1s" value="N" id="s1sn" />No
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Text Language Preference</div>
          <div class="tc req">教材選擇</div>
          <div class="sc req">教材选择</div>
        </td>
        <td>
          <select id="s1pref">
            <option value="1">1. Traditional Zhuyin 繁體注音</option>
            <option value="2">2. Traditional Pinyin 繁體拼音</option>
            <option value="3">3. Simplified 简体</option>
          </select>
        </td>
        <td>
          <div class="req">T-Shirt Size</div>
        </td>
        <td>
          <select id="s1tshirt">
            <option value="YS">Youth S</option>
            <option value="YM">Youth M</option>
            <option value="YL">Youth L</option>
            <option value="AS">Adult S</option>
            <option value="AM">Adult M</option>
            <option value="AL">Adult L</option>
            <option value="AXL">Adult XL</option>
            <option value="AXXL">Adult XXL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Learned Chinese in School/Tutoring</div>
          <div class="tc req">是否曾在學校學過或補習中文</div>
          <div class="sc req">是否曾在学校学过或补习中文</div>
        </td>
        <td colspan=3>
          <select id="s1learned">
            <option value="0">No</option>
            <option value="1">&lt;1 year</option>
            <option value="2">1 - 2 years</option>
            <option value="3">2+ years</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  <div id="stu2">
    <table>
      <tr>
        <td id="s2tln">
          <div class="en req">Last Name</div>
          <div class="tc req">英文姓氏</div>
          <div class="sc req">英文姓氏</div>
        </td>
        <td><input type="text" id="s2ln" maxlength="25"/></td>
        <td id="s2tfn">
          <div class="en req">First Name</div>
          <div class="tc req">英文名字</div>
          <div class="sc req">英文名字</div>
        </td>
        <td><input type="text" id="s2fn" maxlength="25"/></td>
      </tr>
      <tr>
        <td id="s2tcn">
          <div class="en">Chinese Name</div>
          <div class="tc">中文姓名</div>
          <div class="sc">中文姓名</div>
        </td>
        <td><input type="text" id="s2chn" maxlength="5"/></td>
        <td id="s2tbd">
          <div class="en req">Date of Birth</div>
          <div class="tc req">生日</div>
          <div class="sc req">生日</div>
        </td>
        <td><input type="text" id="s2bd" /></td>
      </tr>
      <tr>
        <td id="s2tg">
          <div class="en req">Gender</div>
          <div class="tc req">性別</div>
          <div class="sc req">性別</div>
        </td>
        <td>
          <input type="radio" name="s2g" id="s2gm" />
          <div class="en">Male</div>
          <div class="tc">男</div>
          <div class="sc">男</div>
          <input type="radio" name="s2g" id="s2gf" />
          <div class="en">Female</div>
          <div class="tc">女</div>
          <div class="sc">女</div>
        </td>
        <td id="s2ts">
          <div class="en req">Speak Chinese at Home</div>
          <div class="tc req">在家是否說中文</div>
          <div class="sc req">在家是否说中文</div>
        </td>
        <td>
          <input type="radio" name="s2s" id="s2sy" />Yes
          <input type="radio" name="s2s" id="s2sn" />No
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Text Language Preference</div>
          <div class="tc req">教材選擇</div>
          <div class="sc req">教材选择</div>
        </td>
        <td>
          <select id="s2pref">
            <option value="1">1. Traditional Zhuyin 繁體注音</option>
            <option value="2">2. Traditional Pinyin 繁體拼音</option>
            <option value="3">3. Simplified 简体</option>
          </select>
        </td>
        <td>
          <div class="req">T-Shirt Size</div>
        </td>
        <td>
          <select id="s2tshirt">
            <option value="YS">Youth S</option>
            <option value="YM">Youth M</option>
            <option value="YL">Youth L</option>
            <option value="AS">Adult S</option>
            <option value="AM">Adult M</option>
            <option value="AL">Adult L</option>
            <option value="AXL">Adult XL</option>
            <option value="AXXL">Adult XXL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Learned Chinese in School/Tutoring</div>
          <div class="tc req">是否曾在學校學過或補習中文</div>
          <div class="sc req">是否曾在学校学过或补习中文</div>
        </td>
        <td colspan=3>
          <select id="s2learned">
            <option value="0">No</option>
            <option value="1">&lt;1 year</option>
            <option value="2">1 - 2 years</option>
            <option value="3">2+ years</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  <div id="stu3">
    <table>
      <tr>
        <td id="s3tln">
          <div class="en req">Last Name</div>
          <div class="tc req">英文姓氏</div>
          <div class="sc req">英文姓氏</div>
        </td>
        <td><input type="text" id="s3ln" maxlength="25"/></td>
        <td id="s3tfn">
          <div class="en req">First Name</div>
          <div class="tc req">英文名字</div>
          <div class="sc req">英文名字</div>
        </td>
        <td><input type="text" id="s3fn" maxlength="25"/></td>
      </tr>
      <tr>
        <td id="s3tcn">
          <div class="en">Chinese Name</div>
          <div class="tc">中文姓名</div>
          <div class="sc">中文姓名</div>
        </td>
        <td><input type="text" id="s3chn" maxlength="5"/></td>
        <td id="s3tbd">
          <div class="en req">Date of Birth</div>
          <div class="tc req">生日</div>
          <div class="sc req">生日</div>
        </td>
        <td><input type="text" id="s3bd" /></td>
      </tr>
      <tr>
        <td id="s3tg">
          <div class="en req">Gender</div>
          <div class="tc req">性別</div>
          <div class="sc req">性別</div>
        </td>
        <td>
          <input type="radio" name="s3g" id="s3gm" />
          <div class="en">Male</div>
          <div class="tc">男</div>
          <div class="sc">男</div>
          <input type="radio" name="s3g" id="s3gf" />
          <div class="en">Female</div>
          <div class="tc">女</div>
          <div class="sc">女</div>
        </td>
        <td id="s3ts">
          <div class="en req">Speak Chinese at Home</div>
          <div class="tc req">在家是否說中文</div>
          <div class="sc req">在家是否说中文</div>
        </td>
        <td>
          <input type="radio" name="s3s" id="s3sy" />Yes
          <input type="radio" name="s3s" id="s3sn" />No
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Text Language Preference</div>
          <div class="tc req">教材選擇</div>
          <div class="sc req">教材选择</div>
        </td>
        <td>
          <select id="s3pref">
            <option value="1">1. Traditional Zhuyin 繁體注音</option>
            <option value="2">2. Traditional Pinyin 繁體拼音</option>
            <option value="3">3. Simplified 简体</option>
          </select>
        </td>
        <td>
          <div class="req">T-Shirt Size</div>
        </td>
        <td>
          <select id="s3tshirt">
            <option value="YS">Youth S</option>
            <option value="YM">Youth M</option>
            <option value="YL">Youth L</option>
            <option value="AS">Adult S</option>
            <option value="AM">Adult M</option>
            <option value="AL">Adult L</option>
            <option value="AXL">Adult XL</option>
            <option value="AXXL">Adult XXL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Learned Chinese in School/Tutoring</div>
          <div class="tc req">是否曾在學校學過或補習中文</div>
          <div class="sc req">是否曾在学校学过或补习中文</div>
        </td>
        <td colspan=3>
          <select id="s3learned">
            <option value="0">No</option>
            <option value="1">&lt;1 year</option>
            <option value="2">1 - 2 years</option>
            <option value="3">2+ years</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  <div id="stu4">
    <table>
      <tr>
        <td id="s4tln">
          <div class="en req">Last Name</div>
          <div class="tc req">英文姓氏</div>
          <div class="sc req">英文姓氏</div>
        </td>
        <td><input type="text" id="s4ln" maxlength="25"/></td>
        <td id="s4tfn">
          <div class="en req">First Name</div>
          <div class="tc req">英文名字</div>
          <div class="sc req">英文名字</div>
        </td>
        <td><input type="text" id="s4fn" maxlength="25"/></td>
      </tr>
      <tr>
        <td id="s4tcn">
          <div class="en">Chinese Name</div>
          <div class="tc">中文姓名</div>
          <div class="sc">中文姓名</div>
        </td>
        <td><input type="text" id="s4chn" maxlength="5"/></td>
        <td id="s4tbd">
          <div class="en req">Date of Birth</div>
          <div class="tc req">生日</div>
          <div class="sc req">生日</div>
        </td>
        <td><input type="text" id="s4bd" /></td>
      </tr>
      <tr>
        <td id="s4tg">
          <div class="en req">Gender</div>
          <div class="tc req">性別</div>
          <div class="sc req">性別</div>
        </td>
        <td>
          <input type="radio" name="s4g" id="s4gm" />
          <div class="en">Male</div>
          <div class="tc">男</div>
          <div class="sc">男</div>
          <input type="radio" name="s4g" id="s4gf" />
          <div class="en">Female</div>
          <div class="tc">女</div>
          <div class="sc">女</div>
        </td>
        <td id="s4ts">
          <div class="en req">Speak Chinese at Home</div>
          <div class="tc req">在家是否說中文</div>
          <div class="sc req">在家是否说中文</div>
        </td>
        <td>
          <input type="radio" name="s4s" id="s4sy" />Yes
          <input type="radio" name="s4s" id="s4sn" />No
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Text Language Preference</div>
          <div class="tc req">教材選擇</div>
          <div class="sc req">教材选择</div>
        </td>
        <td>
          <select id="s4pref">
            <option value="1">1. Traditional Zhuyin 繁體注音</option>
            <option value="2">2. Traditional Pinyin 繁體拼音</option>
            <option value="3">3. Simplified 简体</option>
          </select>
        </td>
        <td>
          <div class="req">T-Shirt Size</div>
        </td>
        <td>
          <select id="s4tshirt">
            <option value="YS">Youth S</option>
            <option value="YM">Youth M</option>
            <option value="YL">Youth L</option>
            <option value="AS">Adult S</option>
            <option value="AM">Adult M</option>
            <option value="AL">Adult L</option>
            <option value="AXL">Adult XL</option>
            <option value="AXXL">Adult XXL</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>
          <div class="en req">Learned Chinese</div>
          <div class="tc req">是否曾在學校學過或補習中文</div>
          <div class="sc req">是否曾在学校学过或补习中文</div>
        </td>
        <td colspan=3>
          <select id="s4learned">
            <option value="0">No</option>
            <option value="1">&lt;1 year</option>
            <option value="2">1 - 2 years</option>
            <option value="3">2+ years</option>
          </select>
        </td>
      </tr>
    </table>
  </div>
  <br />
  <input type="button" id="prev3" value="&lt;&lt; Previous" />
  <input type="button" id="next3" value="Next &gt;&gt;" />
</div>
<div class="page" id="page4" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>5 of 7 -&nbsp;</div>
    <div class="en">Data Summary</div>
    <div class="tc">資料確認</div>
    <div class="sc">资料确认</div>
  </div>
  <br />
  <table class="grid">
    <tr>
      <th colspan=4>
        <div class="en">Family Information</div>
        <div class="tc">家庭資料</div>
        <div class="sc">家庭资料</div>
      </th>
    </tr>
    <tr>
      <td></td>
      <td class="fixed">
        <div class="en">Parent/Guardian 1</div>
        <div class="tc">家長/監護人1</div>
        <div class="sc">家长/监护人1</div>
      </td>
      <td class="fixed">
        <div class="en">Parent/Guardian 2</div>
        <div class="tc">家長/監護人2</div>
        <div class="sc">家长/监护人2</div>
      </td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">English Name</div>
        <div class="tc">英文姓名</div>
        <div class="sc">英文姓名</div>
      </td>
      <td><span id="gp1eng_name" /></td>
      <td><span id="gp2eng_name" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><span id="gp1chn_name" /></td>
      <td><span id="gp2chn_name" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Occupation/Specialty</div>
        <div class="tc">職業/專長</div>
        <div class="sc">职业/专长</div>
      </td>
      <td><span id="gp1spec" /></td>
      <td><span id="gp2spec" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Primary Phone</div>
        <div class="tc">主要電話</div>
        <div class="sc">主要电话</div>
      </td>
      <td><span id="gp1cell_ph" /></td>
      <td><span id="gp2cell_ph" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Work Phone</div>
        <div class="tc">次要電話</div>
        <div class="sc">次要电话</div>
      </td>
      <td><span id="gp1work_ph" /></td>
      <td><span id="gp2work_ph" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div>E-Mail</div>
      </td>
      <td><span id="gp1email" /></td>
      <td><span id="gp2email" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Mandarin Proficiency</div>
        <div class="tc">中文程度</div>
        <div class="sc">中文水平</div>
      </td>
      <td><span id="gp1chnlv" /></td>
      <td><span id="gp2chnlv" /></td>
    </tr>
    <tr>
       <td class="fixed">
         <div class="en">Street Address</div>
         <div class="tc">住家街道地址</div>
         <div class="sc">住家街道地址</div>
       </td>
       <td colspan=3><span id="gaddr" /></td>
    </tr>
    <tr>
       <td class="fixed">
         <div class="en">City</div>
         <div class="tc">城市</div>
         <div class="sc">城市</div>
       </td>
       <td><span id="gcity" /></td>
       <td class="fixed">
         <div class="en">State</div>
         <div class="tc">州</div>
         <div class="sc">州</div>
       </td>
       <td><span id="gstate" /></td>
    </tr>
    <tr>
       <td class="fixed">
         <div class="en">Zip</div>
         <div class="tc">郵遞區號</div>
         <div class="sc">邮政编码</div>
       </td>
       <td><span id="gzip" /></td>
       <td class="fixed">
        <div class="en">Phone</div>
        <div class="tc">電話</div>
        <div class="sc">电话</div>
      </td>
      <td><span id="ghome_ph" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Doctor Name</div>
        <div class="tc">醫生姓名</div>
        <div class="sc">医生姓名</div>
      </td>
      <td><span id="gdoc_name" /></td>
      <td class="fixed">
        <div class="en">Phone</div>
        <div class="tc">電話</div>
        <div class="sc">电话</div>
      </td>
      <td><span id="gdoc_ph" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Emergency Contact Name</div>
        <div class="tc">緊急聯絡人姓名</div>
        <div class="sc">紧急联络人姓名</div>
      </td>
      <td><span id="gemer_name" /></td>
      <td class="fixed">
        <div class="en">Phone</div>
        <div class="tc">電話</div>
        <div class="sc">电话</div>
      </td>
      <td><span id="gemer_ph" /></td>
    </tr>
  </table>
  <table class="grid" id="gs1">
    <tr>
      <th colspan="4">
        <div class="en">Student Information</div>
        <div class="tc">學生資料</div>
        <div class="sc">学生资料</div>
      </th>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Last Name</div>
        <div class="tc">英文姓氏</div>
        <div class="sc">英文姓氏</div>
      </td>
      <td><span id="gs1ln" /></td>
      <td class="fixed">
        <div class="en">First Name</div>
        <div class="tc">英文名字</div>
        <div class="sc">英文名字</div>
      </td>
      <td><span id="gs1fn" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><span id="gs1chn" /></td>
      <td class="fixed">
        <div class="en">Date of Birth</div>
        <div class="tc">生日</div>
        <div class="sc">生日</div>
      </td>
      <td><span id="gs1bd" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Gender</div>
        <div class="tc">性別</div>
        <div class="sc">性別</div>
      </td>
      <td><span id="gs1gender" /></td>
      <td class="fixed">
        <div class="en">Speak Chinese at Home</div>
        <div class="tc">在家是否說中文</div>
        <div class="sc">在家是否说中文</div>
      </td>
      <td><span id="gs1s" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Material Preference</div>
        <div class="tc">教材選擇</div>
        <div class="sc">教材选择</div>
      </td>
      <td><span id="gs1pref" /></td>
      <td class="fixed">
        <div>T-Shirt Size</div>
      </td>
      <td><span id="gs1tshirt" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Learned Chinese</div>
        <div class="tc">是否曾學過中文</div>
        <div class="sc">是否曾学过中文</div>
      </td>
      <td colspan="3"><span id="gs1learned" /></td>
    </tr>
  </table>
  <table class="grid" id="gs2">
    <tr>
      <th colspan="4">
        <div class="en">Student 2 Information</div>
        <div class="tc">學生2 資料</div>
        <div class="sc">学生2 资料</div>
      </th>
	</tr>
    <tr>
      <td class="fixed">
        <div class="en">Last Name</div>
        <div class="tc">英文姓氏</div>
        <div class="sc">英文姓氏</div>
      </td>
      <td><span id="gs2ln" /></td>
      <td class="fixed">
        <div class="en">First Name</div>
        <div class="tc">英文名字</div>
        <div class="sc">英文名字</div>
      </td>
      <td><span id="gs2fn" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><span id="gs2chn" /></td>
      <td class="fixed">
        <div class="en">Date of Birth</div>
        <div class="tc">生日</div>
        <div class="sc">生日</div>
      </td>
      <td><span id="gs2bd" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Gender</div>
        <div class="tc">性別</div>
        <div class="sc">性別</div>
      </td>
      <td><span id="gs2gender" /></td>
      <td class="fixed">
        <div class="en">Speak Chinese at Home</div>
        <div class="tc">在家是否說中文</div>
        <div class="sc">在家是否说中文</div>
      </td>
      <td><span id="gs2s" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Material Preference</div>
        <div class="tc">教材選擇</div>
        <div class="sc">教材选择</div>
      </td>
      <td><span id="gs2pref" /></td>
      <td class="fixed">
        <div>T-Shirt Size</div>
      </td>
      <td><span id="gs2tshirt" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Learned Chinese</div>
        <div class="tc">是否曾學過中文</div>
        <div class="sc">是否曾学过中文</div>
      </td>
      <td colspan="3"><span id="gs2learned" /></td>
    </tr>
  </table>
  <table class="grid" id="gs3">
    <tr>
      <th colspan="4">
        <div class="en">Student 3 Information</div>
        <div class="tc">學生3 資料</div>
        <div class="sc">学生3 资料</div>
      </th>
	</tr>
    <tr>
      <td class="fixed">
        <div class="en">Last Name</div>
        <div class="tc">英文姓氏</div>
        <div class="sc">英文姓氏</div>
      </td>
      <td><span id="gs3ln" /></td>
      <td class="fixed">
        <div class="en">First Name</div>
        <div class="tc">英文名字</div>
        <div class="sc">英文名字</div>
      </td>
      <td><span id="gs3fn" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><span id="gs3chn" /></td>
      <td class="fixed">
        <div class="en">Date of Birth</div>
        <div class="tc">生日</div>
        <div class="sc">生日</div>
      </td>
      <td><span id="gs3bd" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Gender</div>
        <div class="tc">性別</div>
        <div class="sc">性別</div>
      </td>
      <td><span id="gs3gender" /></td>
      <td class="fixed">
        <div class="en">Speak Chinese at Home</div>
        <div class="tc">在家是否說中文</div>
        <div class="sc">在家是否说中文</div>
      </td>
      <td><span id="gs3s" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Material Preference</div>
        <div class="tc">教材選擇</div>
        <div class="sc">教材选择</div>
      </td>
      <td><span id="gs3pref" /></td>
      <td class="fixed">
        <div>T-Shirt Size</div>
      </td>
      <td><span id="gs3tshirt" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Learned Chinese</div>
        <div class="tc">是否曾學過中文</div>
        <div class="sc">是否曾学过中文</div>
      </td>
      <td colspan="3"><span id="gs3learned" /></td>
    </tr>
  </table>
  <table class="grid" id="gs4">
    <tr>
      <th colspan="4">
        <div class="en">Student 4 Information</div>
        <div class="tc">學生4 資料</div>
        <div class="sc">学生4 资料</div>
      </th>
	</tr>
    <tr>
      <td class="fixed">
        <div class="en">Last Name</div>
        <div class="tc">英文姓氏</div>
        <div class="sc">英文姓氏</div>
      </td>
      <td><span id="gs4ln" /></td>
      <td class="fixed">
        <div class="en">First Name</div>
        <div class="tc">英文名字</div>
        <div class="sc">英文名字</div>
      </td>
      <td><span id="gs4fn" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Chinese Name</div>
        <div class="tc">中文姓名</div>
        <div class="sc">中文姓名</div>
      </td>
      <td><span id="gs4chn" /></td>
      <td class="fixed">
        <div class="en">Date of Birth</div>
        <div class="tc">生日</div>
        <div class="sc">生日</div>
      </td>
      <td><span id="gs4bd" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Gender</div>
        <div class="tc">性別</div>
        <div class="sc">性別</div>
      </td>
      <td><span id="gs4gender" /></td>
      <td class="fixed">
        <div class="en">Speak Chinese at Home</div>
        <div class="tc">在家是否說中文</div>
        <div class="sc">在家是否说中文</div>
      </td>
      <td><span id="gs4s" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Material Preference</div>
        <div class="tc">教材選擇</div>
        <div class="sc">教材选择</div>
      </td>
      <td><span id="gs4pref" /></td>
      <td class="fixed">
        <div>T-Shirt Size</div>
      </td>
      <td><span id="gs4tshirt" /></td>
    </tr>
    <tr>
      <td class="fixed">
        <div class="en">Learned Chinese</div>
        <div class="tc">是否曾學過中文</div>
        <div class="sc">是否曾学过中文</div>
      </td>
      <td colspan="3"><span id="gs4learned" /></td>
    </tr>
  </table>
  <div class="en">Please verify your information above. Click "Previous" button to make changes. You will not be able to modify these data after clicking "Next". Click "Next" to continue.</div>
  <div class="tc">請確認上開資料的正確性, 按「上一頁」修改資料，按「下一頁」繼續，按下「下一頁」後, 您將無法對這些資料做任何的更動。</div>
  <div class="sc">请确认上开资料的正确性, 按「上一页」修改资料，按「下一页」继续，按下「下一页」後, 您将无法对这些资料做任何的更动。</div>
  <input type="button" id="prev4" value="&lt;&lt; Previous" />
  <input type="button" id="next4" value="Next &gt;&gt;" />
</div>
<div class="page" id="page5" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>6 of 7 -&nbsp;</div>
    <div class="en">Legal Notes</div>
    <div class="tc">法律文件</div>
    <div class="sc">法律文件</div>
  </div>
  <div class="subtitle">
    Medical Authorization and Disclaimer<br />
    <div class="tc">授權急救及校方免責聲明</div>
    <div class="sc">授权急救及校方免责声明</div>
  </div>
  <div>
    I (we) request that the above named students be permitted to participate
	in the Chinese Language School of Southern California (CLSSC) activities.
	He/She is in good physical condition. In case of illness or accident, the
	CLSSC has my (our) authorization to secure necessary medical attention. I
	(we) will not hold CLSSC or its officers or teachers liable for medical aid
	rendered and will reimburse CLSSC for medical or other expenses incurred in
	his/her care. I (we) am (are) hereby waiving all claims against CLSSC and
	Los Angeles Unified School District, which provides campus for school
	activities for injury, accident, illness or death occurring during school hours.<br/>
    <div class="tc">我(們)懇請西區中文學校准許以上列學生參與校內、校際活動。他/她(們)的體能狀況良好,
    但是在身體不適或意外事件時, 我(們)則授與學校採取必要醫護措施之權力,
    並且我(們)將負責所有費用及免除學校和教職員任何刑責。至於上課期間萬一有不幸之意外、疾病、傷亡,
    我(們)更特此聲明放棄採取控訴西區中文學校及洛杉磯聯合學區之權利。<br/></div>
    <div class="sc">我(们)恳请西区中文学校准许以上列学生参与校内、校际活动。他/她(们)的体能状况良好,
    但是在身体不适或意外事件时, 我(们)则授与学校采取必要医护措施之权力,
    并且我(们)将负责所有费用及免除学校和教职员任何刑责。至於上课期间万一有不幸之意外、疾病、伤亡,
    我(们)更特此声明放弃采取控诉西区中文学校及洛杉矶联合学区之权利。<br /></div>
  </div>
  <hr />
  <div class="subtitle">
    Express Assumption of Risk and Responsibility<br />
    <div class="tc">承擔風險及責任聲明</div>
    <div class="sc">承担风险及责任声明</div>
  </div>
  <div>
    As a member of CLSSC, I (we) understand and concur that purchasing liability
	insurance coverage other than for enrolled students would result in undue
	financial burden on CLSSC, and it is not necessary. However, I (we) also
	recognize the fact that there is possibility of accident, injury or medical
	emergency occurring to uninsured members, family, relatives or friends. I
	(we) also realize that personal property may be lost or damaged, that certain
	foreseeable and unforeseeable events could contribute to the unpredictability
	of the risks and danger of any activity that I (we) may choose to participate.
	In recognition of the aforementioned potential risks, I (we) assume the risks
	of personal injury, accidents and property loss or damage of the uninsured
	members, family, relatives, friends, and hereby release CLSSC and Los Angeles
	Unified School District from any financial or legal responsibility regardless
	of the cause.<br />
    <div class="tc">身為西區中文學校的會員, 我(們)了解也同意購買學生責任險以外之保險不但增加學校的負擔而且也沒必要,
	但是我(們) 同時也體認到意外、傷亡、疾病可能會發生在不為保險涵蓋之會員、家屬及親友, 個人財產可能會遭到損失,
	某些可預期及不可預期之事件可能會為學校所舉辦之活動帶來風險。有鑑於此, 我(們)特此聲明若參加學校所舉辦之校內、校際活動,
	我(們)將承擔所有風險包括發生於本身、家屬及親友之意外、傷亡、疾病、財產損失, 放棄訴訟西區中文學校及洛杉磯聯合學區的權利。<br /></div>
    <div class="sc">身为西区中文学校的会员, 我(们)了解也同意购买学生责任险以外之保险不但增加学校的负担而且也没必要,
	但是我(们) 同时也体认到意外、伤亡、疾病可能会发生在不为保险涵盖之会员、家属及亲友, 个人财产可能会遭到损失,
	某些可预期及不可预期之事件可能会为学校所举办之活动带来风险。有�Α�Α�於此, 我(们)特此声明若参加学校所举办之校内、校际活动,
	我(们)将承担所有风险包括发生於本身、家属及亲友之意外、伤亡、疾病、财产损失, 放弃诉讼西区中文学校及洛杉矶联合学区的权利。<br /></div>
  </div>
  <hr />
  <div class="subtitle">
    Limited Personal Data Usage<br />
    <div class="tc">個人資料使用聲明</div>
    <div class="sc">个人资料使用声明</div>
  </div>
  <div>
    I agree to allow CLSSC to publish my name, telephone number and email address
	in a school-wide roster. This roster is for school purpose only and will be
	made available only to school members. I grant permission to use photos and
	videos of my child on CLSSC website, bulletin boards, and /or newsletters.<br />
    <div class="tc">我同意允許西區中文學校全校名冊中公佈我的名字, 電話號碼和電子郵件地址。這個名冊僅供學校用途,
	將只提供給學校成員。我也同意允許學校網站、活動公告及新聞校報中出現我子女的影像。<br/></div>
    <div class="sc">我同意允许西区中文学校全校名册中公布我的名字, 电话号码和电子邮件地址。这个名册仅供学校用途,
	将只提供给学校成员。我也同意允许学校网站、活动公告及新闻校报中出现我子女的影像。<br/></div>
  </div>

  <hr />
  <input type="checkbox" id="consent" />I (we) had read above statements and agree to
  accept them.
  <div class="tc">我(們)已閱讀以上聲明並接受其條款。</div>
  <div class="sc">我(们)已阅读以上声明并接受其条款。</div>

  <hr />

  <br />
  <input type="button" id="next5" value="Submit Application" />
</div>
<div class="page" id="page6" style="visibility:none">
  <div class="pagetitle">
    <div class="en">Westside Chinese School Registration</div>
    <div class="tc">西區中文學校網路註冊</div>
    <div class="sc">西区中文学校网络注册</div>
  </div>
  <div class="subtitle">
    <div>7 of 7 -&nbsp;</div>
    <div class="en">Application Received</div>
    <div class="tc">申請完成</div>
    <div class="sc">申请完成</div>
  </div>
  <br />
  <div class="en">
    We had received your application. The registration is NOT completed until the
    payment for tuition is fulfilled. Please make check payable to CLSSC.
    <br />
    <b>You MUST print out this page and mail it with your payment to
    P.O. Box 1280, Culver City, CA 90232 to complete the registration.</b>
    <br />
    To qualify for early bird discount, you MUST send your check to CLSSC,
    postmarked before July 31, 2014.
  </div>
  <div class="tc">
    系統已登錄您的申請表格, 您必須完成繳費的手續才算完成註冊, 支票抬頭為 CLSSC。
    <br />
    <b>您必須將此頁列印出來，連同您的支票一起郵寄到
    P.O. Box 1280, Culver City, CA 90232 以完成註冊手續。</b>
    <br />
    您必須在 2014 年 7 月 31 日前將支票寄出 (郵戳為憑) 才能享有提前註冊的折扣。
  </div>
  <div class="sc">
    系统已登录您的申请表格, 您必须完成缴费的手续才算完成注册, 支票抬头为 CLSSC。
    <br />
    <b>您必须将此页打印出来，连同您的支票一起邮寄到
    P.O. Box 1280, Culver City, CA 90232 以完成注册手续。</b><br />
    您必须在 2014 年 7 月 31 日前将支票寄出 (邮戳为凭) 才能享有提前注册的折扣。
  </div>
  <div>
    <b>
    <div class="en">Tuition and Fees</div>
    <div class="tc">學費與雜費</div>
    <div class="sc">学费与杂费</div>
    </b>
  </div>
  <br />
  <div>
    <table>
      <tr>
        <td></td><td>$700 ($600 early bird) * <span id="snum_stu">1</span></td>
      </tr>
      <tr>
        <td>+</td><td>Service Point Deposit $<span id="ssvc_deposit">200</span></td>
      </tr>
      <tr>
        <td>+</td><td>Non-refundable Registration fee $100</td>
      </tr>
      <tr>
        <td>=</td><td>Total: $<span id="stotal">1000</span> (or $<span id="stotal2">900</span> early bird)</td>
      </tr>
    </table>
  </div>
  <br />
  <div class="en">Thank you for applying Westside Chinese School and see you in September!</div>
  <div class="tc">感謝您申請加入西區中文學校, 我們九月校園見!</div>
  <div class="sc">感谢您申请加入西区中文学校, 我们九月校园见!</div>

  <br /><br /><br />
  <div class="systemdata">
    ===================================================<br />
    Data generated for office use, DO NOT CUT/MODIFY.
    <div id="systemdata"></div>
    ===================================================
  </div>
</div>
<div id="progress" title="Processing ...">
  <div class="en">Transmitting data to server, please wait ...</div>
  <div class="tc">資料傳輸中，請稍候 ...</div>
  <div class="sc">资料传输中，请稍候 ...</div>
</div>
<div id="error" title="Error">
  <div class="en">Server error, please try to submit again.</div>
  <div class="tc">系統出現錯誤, 請試試看再次提交是否可行。</div>
  <div class="sc">系统出现错误, 请试试看再次提交是否可行。</div>
</div>
<script type="text/javascript">
  var LANG = ['en', 'tc', 'sc'];
  var STATE = [
    'AL', 'AK',  'AR', 'AS', 'AZ',
    'CO', 'CT',
    'DC', 'DE',
    'FL',
    'GA', 'GU',
    'HI',
    'IA', 'ID', 'IL', 'IN',
    'KS', 'KY',
    'LA',
    'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT',
    'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY',
    'OH', 'OK', 'OR',
    'PA', 'PR',
    'RI',
    'SC', 'SD',
    'TN', 'TX',
    'UT',
    'VA', 'VT',
    'WA', 'WI', 'WV', 'WY'
  ];

  // The very evil global variables.
  var numStudents = 1;  // Number of students, range [1, 4].
  var numParents = 2;  // Number of parents, range [1, 2].
  var cutoffTimestamp = new Date(2009, 12, 7).getTime();
  var adultTimestamp = new Date(1996, 10, 12).getTime();
  var submission = '';  // Data to submit to server.
  var numAdultStudents = 0;
  var lang = '';

  // When the page loads.
  $(function() {
    $('#progress').dialog({
      autoOpen: false,
      resizable: false,
      modal: true,
    });

    $('#error').dialog({
      autoOpen: false,
      resizable: false,
      modal: true,
      buttons: {
        'OK': function() { $(this).dialog('close'); }
      }
    });

    // Fill the state dropbox.
    for (var i = 0; i < STATE.length; ++i) {
      $('#state').append('<option value=' + STATE[i] + '>' + STATE[i] + '</option>');
    }
    // Date picker.
    for (var i = 1; i <= 4; ++i) {
      $('#s' + i + 'bd').datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm-dd-yy',
        maxDate: new Date(),
        yearRange: '-80:+0'
      });
    }

    // Navigation buttons.
    $('#next0').click(function() { showPage(1); });
    $('#next1').click(function() { showParents(); showPage(2); });
    $('#next2').click(function() { if (validateFamilyData()) { showStudents(); showPage(3); }});
    // $('#next2b').click(function() { showStudents(); showPage(3); });
    $('#next3').click(function() { if (validateStudentData()) { genSummary(); showPage(4); } });
    // $('#next3b').click(function() { genSummary(); showPage(4); });
    $('#next4').click(function() { showPage(5); });
    $('#next5').click(function() { genFinalData(); });
    $('#prev3').click(function() { showParents(); showPage(2); });
    $('#prev4').click(function() { showStudents(); showPage(3); });

    // Special show-hide related buttons.
    $('#only1p').change(function() {
      numParents = this.checked ? 1 : 2;
      clearFamilyErrors();
      showParents();
    });
    $('#num_stu').change(function() {
      numStudents = $('#num_stu option:selected').val();
      clearStudentErrors();
      showStudents();
    });
    $('#consent').change(function() { toggleLegalStep(); });

    showLangSelector();
  });

  function showLangSelector() {
    for (var i = 0; i < 7; ++i) {
      var pageId = '#page' + i;
      $(pageId).hide();
    }
    $('#lang_selector').show();
    $('#lang_en').click(function() { lang = 'en'; reallyStart(); });
    $('#lang_tc').click(function() { lang = 'tc'; reallyStart(); });
    $('#lang_sc').click(function() { lang = 'sc'; reallyStart(); });
  }

  function reallyStart() {
    localizeButtons();
    showParents();
    showStudents();
    toggleLegalStep();
    showPage(0);
  }

  function showPage(pageNumber) {
    $('#lang_selector').hide();
    for (var i = 0; i < LANG.length; ++i) {
      if (LANG[i] == lang) {
        $('div.' + LANG[i]).show();
        $('span.' + LANG[i]).show();
      } else {
        $('div.' + LANG[i]).hide();
        $('span.' + LANG[i]).hide();
      }
    }
    for (var i = 0; i < 7; ++i) {
      var pageId = '#page' + i;
      if (i != pageNumber) {
        $(pageId).hide();
      } else {
        $(pageId).show();
      }
    }
  }

  function localizeButtons() {
    if (lang != 'en') {
      for (var i = 0; i < 5; ++i) {
        var id = '#next' + i;
        $(id).prop('value', '下一步 >>');
      }
      $('#prev3').prop('value', '<< 上一步');
      $('#prev4').prop('value', '<< 上一步');
      $('#next5').prop('value', lang == 'tc' ? '提交申請表' : '提交申请表');
    }
  }

  function showStudents() {
    for (var i = 1; i <= 4; ++i) {
      var id = '#stu' + i;
      var id2 = '#gs' + i;
      if (i <= numStudents) {
        $(id).show();
        $(id2).show();
      } else {
        $(id).hide();
        $(id2).hide();
      }
    }
  }

  function showParents() {
    var ids = [
      '#p2t',
      '#p2eng_name',
      '#p2chn_name',
      '#p2spec',
      '#p2work_ph',
      '#p2cell_ph',
      '#p2email',
      '#p2chnlv',
      '#p2svcpref'
    ];
    for (var i = 0; i < ids.length; ++i) {
      if (numParents == 1) {
        $(ids[i]).hide();
      } else {
        $(ids[i]).show();
      }
    }
  }

  function toggleLegalStep() {
    if ($('#consent').is(':checked')) {
      $('#next5').removeAttr("disabled");
    } else {
      $('#next5').attr('disabled', 'disabled');
    }
  }

  // The following validator functions are copied from validator.gs.
  // They took input and attempt to return sanitized output.
  function validatePhone(input) {
    // Strip all stuff except numbers and x.
    var fromString = input.toString().replace(/[^\d+!x]/g, '').split('x');
    if (fromString.length <= 2) {
      if (fromString[0].length == 10) {
        var retValue = fromString[0].substr(0, 3) + '-' +
            fromString[0].substr(3, 3) + '-' +
            fromString[0].substr(6, 4);
        if (fromString.length == 2 && fromString[1].length) {
          retValue += 'x' + fromString[1];
        }
        return retValue;
      }
    }
    return '';
  };

  function validateEmail(input) {
    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
    return re.test(input) ? input.toLowerCase() : '';
  };

  function validateZip(input) {
    var re = /^([0-9]{5})(?:[-\s]*([0-9]{4}))?$/;
    return re.test(input) ? input.toString() : '';
  };

  function validateChinese(input) {
    var re = /^[\u4E00-\u9FA5]+$/;
	return re.test(input) ? input.toString() : '';
  }

  function clearFamilyErrors() {
    $('#parentTable td').removeClass();
    $('#familyTable td').removeClass();
  }

  function validateFamilyData() {
    clearFamilyErrors();
    var result = true;

    for (var i = 1; i <= numParents; ++i) {
      // Check if name is empty.
      if (!$('#p' + i + 'eng_name').val().trim().length) {
        result &= false;
        $('#pteng_name').addClass('error');
      }

      // Check cell phone validity.
      var cell = validatePhone($('#p' + i + 'cell_ph').val().trim());
      if (cell.length != 12) {
        result &= false;
        $('#ptcell').addClass('error');
      } else {
        $('#p' + i + 'cell_ph').val(cell);
      }
	
	  // Check secondary phone
	  var rawWorkPhone = $('#p' + i + 'work_ph').val().trim();
	  var workPhone = validatePhone(rawWorkPhone);
	  if (workPhone != rawWorkPhone) {
	    result &= false;
		$('#ptworkph').addClass('error');
	  }
	
	  // Check chinese name
	  var rawChineseName = $('#p' + i + 'chn_name').val().trim();
	  var chnName = validateChinese(rawChineseName);
	  if (chnName != rawChineseName) {
	    result &= false;
		$('#ptchn_name').addClass('error');
	  }
	
      // Check email validity.
      var email = validateEmail($('#p' + i + 'email').val().trim());
      if (email.length < 4) {
        result &= false;
        $('#ptemail').addClass('error');
      } else {
        $('#p' + i + 'email').val(email);
      }

      // Check if chinese level is checked.
      var nada = '#p' + i + 'clv0';
      var lands = '#p' + i + 'clv1';
      var edu = '#p' + i + 'clv2';
      if (!$(nada).is(':checked') && !$(lands).is(':checked') &&
          !$(edu).is(':checked')) {
        result &= false;
        $('#ptchnlv').addClass('error');
      }
    }

    // Make sure address is valid.
    if (!$('#addr').val().trim().length) {
      result &= false;
      $('#ptaddr').addClass('error');
    }
    if (!$('#city').val().trim().length) {
      result &= false;
      $('#ptcity').addClass('error');
    }
    var zip = validateZip($('#zip').val().trim());
    if (zip.length != 5) {
      result &= false;
      $('#ptzip').addClass('error');
    }

    var phone = validatePhone($('#home_ph').val().trim());
    if (phone.length != 12) {
      result &= false;
      $('#pthome_ph').addClass('error');
    } else {
      $('#home_ph').val(phone);
    }

    // Format optional phone numbers
//    var fax = validatePhone($('#fax').val().trim());
//    $('#fax').val(fax);
    var docPh = validatePhone($('#doc_ph').val().trim());
	if (docPh.length != 0 && docPh.length != 12) {
	  result &= false;
	  $('#ptdoc_ph').addClass('error');
	} else {
      $('#doc_ph').val(docPh);
	}
    var emerPh = validatePhone($('#emer_ph').val().trim());
	if (emerPh.length != 0 && emerPh.length != 12) {
	  result &= false;
	  $('#ptemer_ph').addClass('error');
	} else {
      $('#demer_ph').val(emerPh);
	}

    return result;
  }

  function clearStudentErrors() {
    for (var i = 1; i <= 4; ++i) {
      $('#stu' + i + ' td').removeClass();
    }
  }

  function validateStudentData() {
    clearStudentErrors();
    var result = true;
    numAdultStudents = 0;
    for (var i = 1; i <= numStudents; ++i) {
      // Check if names are empty.
      if (!$('#s' + i + 'ln').val().trim().length) {
        result &= false;
        $('#s' + i + 'tln').addClass('error');
      }
      if (!$('#s' + i + 'fn').val().trim().length) {
        result &= false;
        $('#s' + i + 'tfn').addClass('error');
      }
	
	  // Check Chinese name is Chinese
	  // Check chinese name
	  var rawChName = $('#s' + i + 'chn').val().trim();
	  var chName = validateChinese(rawChName);
	  if (chName != rawChName) {
	    result &= false;
		$('#s' + i + 'tcn').addClass('error');
	  }

      // Check DOB is greater than 5 years.
      var value = $('#s' + i + 'bd').val();
      var dateResult = false;
      if (value.length) {
        var timestamp = 0;
        try {
          timestamp = jQuery.datepicker.parseDate('mm-dd-yy', value).getTime();
        } catch (e) {}
        if (timestamp < cutoffTimestamp) {
          dateResult = true;
        }
        if (timestamp < adultTimestamp) {
          numAdultStudents++;
        }
      }
      if (!dateResult) {
        result &= false;
        $('#s' + i + 'tbd').addClass('error');
      }

      // Check if gender is checked.
      var male = '#s' + i + 'gm';
      var female = '#s' + i + 'gf';
      if (!$(male).is(':checked') && !$(female).is(':checked')) {
        result &= false;
        $('#s' + i + 'tg').addClass('error');
      }

      // Check if speak Chinese at home is checked.
      var scy = '#s' + i + 'sy';
      var scn = '#s' + i + 'sn';
      if (!$(scy).is(':checked') && !$(scn).is(':checked')) {
        result &= false;
        $('#s' + i + 'ts').addClass('error');
      }
    }
    return result;
  }

  function genFamilySummary() {
    var data = {
      address: $('#addr').val(),
      city: $('#city').val(),
      state: $('#state').val(),
      zip: $('#zip').val(),
      home_ph: $('#home_ph').val(),
//      fax: $('#fax').val(),
      doc_name: $('#doc_name').val(),
      doc_ph: $('#doc_ph').val(),
      emer_name: $('#emer_name').val(),
      emer_ph: $('#emer_ph').val(),
      video_consent: true
    };

    $('#gaddr').text(data.address);
    $('#gcity').text(data.city);
    $('#gstate').text(data.state);
    $('#gzip').text(data.zip);
    $('#ghome_ph').text(data.home_ph);
//    $('#gfax').text(data.fax);
    $('#gdoc_name').text(data.doc_name);
    $('#gdoc_ph').text(data.doc_ph);
    $('#gemer_name').text(data.emer_name);
    $('#gemer_ph').text(data.emer_ph);
    return data;
  }

  function getChineseLevelString(level) {
    return level == 0 ? 'Non-speaker' :
      level == 1 ? 'Listen/Speak Only' :
      'Native Educated';
  }

  function genParentSummary() {
    var data = [];
    for (var i = 1; i <= numParents; ++i) {
      var item = {
        eng_name: $('#p' + i + 'eng_name').val(),
        chn_name: $('#p' + i + 'chn_name').val(),
        spec: $('#p' + i + 'spec').val(),
        work_ph: $('#p' + i + 'work_ph').val(),
        cell_ph: $('#p' + i + 'cell_ph').val(),
        email: $('#p' + i + 'email').val(),
        chnlv: $('#p' + i + 'clv0').is(':checked') ? 0 :
               ($('#p' + i + 'clv1').is(':checked') ? 1 : 2)
      };
      data.push(item);

      $('#gp' + i + 'eng_name').text(item.eng_name);
      $('#gp' + i + 'chn_name').text(item.chn_name);
      $('#gp' + i + 'spec').text(item.spec);
      $('#gp' + i + 'work_ph').text(item.work_ph);
      $('#gp' + i + 'cell_ph').text(item.cell_ph);
      $('#gp' + i + 'email').text(item.email);
      $('#gp' + i + 'chnlv').text(getChineseLevelString(item.chnlv));
    }

    return data;
  }

  function localizeGender(gender) {
    return lang == 'en' ? gender :
        gender == 'M' ? '男' : '女';
  }

  function getPrefString(item) {
    return item == 1 ? '1. Traditional Zhuyin 繁體注音' :
      item == 2 ? '2. Traditional Pinyin 繁體拼音' :
      '3. Simplified 简体';
  }

  function getLearnedString(learned) {
    switch (parseInt(learned, 10)) {
      case 1: return '<1 year';
      case 2: return '1 - 2 years';
      case 3: return '2+ years';
      default: return 'No';
    }
  }

  function genStudentSummary() {
    var data = [];
    for (var i = 1; i <= numStudents; ++i) {
      var male = '#s' + i + 'gm';
      var scy = '#s' + i + 'sy';
      var item = {
        last_name: $('#s' + i + 'ln').val(),
        first_name: $('#s' + i + 'fn').val(),
        chn_name: $('#s' + i + 'chn').val(),
        dob: $('#s' + i + 'bd').val(),
        gender: $(male).is(':checked') ? 'M' : 'F',
        sch: $(scy).is(':checked') ? 'Y' : 'N',
        pref: $('#s' + i + 'pref').val(),
        tshirt: $('#s' + i + 'tshirt').val(),
        learned: $('#s' + i + 'learned').val()
      };
      data.push(item);

      $('#gs' + i + 'ln').text(item.last_name);
      $('#gs' + i + 'fn').text(item.first_name);
      $('#gs' + i + 'chn').text(item.chn_name);
      $('#gs' + i + 'bd').text(item.dob);
      $('#gs' + i + 'gender').text(localizeGender(item.gender));
      $('#gs' + i + 's').text(item.sch);
      $('#gs' + i + 'pref').text(getPrefString(item.pref));
      $('#gs' + i + 'tshirt').text(item.tshirt);
      $('#gs' + i + 'learned').text(getLearnedString(item.learned));
    }

    return data;
  }

  function genSummary() {
    var data = {
      family: genFamilySummary(),
      parents: genParentSummary(),
      students: genStudentSummary()
    };
    submission = JSON.stringify(data);
  }

  function onServerReturn(data) {
    $('#systemdata').html(data);
    $('#progress').dialog('close');

    // Calculate amount before proceeding to final page.
    $('#snum_stu').text(numStudents.toString());
    var svcDeposit = (numStudents - numAdultStudents) > 0 ? 200 : 0;
    $('#ssvc_deposit').text(svcDeposit.toString());
    var total = 700 * numStudents + svcDeposit + 100;
    var total2 = 600 * numStudents + svcDeposit + 100;
    $('#stotal').text(total.toString());
    $('#stotal2').text(total2.toString());

    showPage(6);
  }

  function onServerFailure(e) {
    $('#progress').dialog('close');
    $('#error').dialog('open');
    $('#next5').removeAttr("disabled");
    console.log(e);
  }

  function genFinalData() {
    $('#next5').attr("disabled", "disabled");
    $('#progress').dialog('open');
    $.ajax({
      type: 'POST',
      url: 'https://script.google.com/macros/s/AKfycbxqx88xp0nKnULwYVyjZT9Y9_7pGwxhsj2YXYCAjjASW6fwpwA5/exec',
      data: submission,
      dataType: 'text'
    }).done(function(data) {
      onServerReturn(data);
    }).fail(function(e) {
      onServerFailure(e);
    });
  }
</script>

</body>
</html>